<template>
    <div id="estimationChart" :style="{ width: props.width, height: props.height }"></div>
</template>
<script setup lang="ts">
import { useEstimationStore } from '@/stores';
import * as echarts from 'echarts';
import { onMounted } from 'vue';
const props = defineProps<{ width: string, height: string, title?: string }>()
onMounted(() => {
    try {
        drawChart()
    } catch (error: any) {
        console.error('元素不存在！')
    }
})
async function drawChart() {
    await useEstimationStore().init()
    const estimation = {
        moral: useEstimationStore().moral,
        practice: useEstimationStore().practice,
        attitude: useEstimationStore().attitude,
        total: useEstimationStore().total
    }
    const c = document.getElementById('estimationChart')
    if (!c) {
        // console.error('元素不存在！')
        return
    }
    const chart = echarts.init(c);
    const option: echarts.EChartsOption = {
        title: {
            text: '我的评分情况',
            textStyle: {
                color: '#333',
                fontSize: 18
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: [
            {
                type: 'category',
                data: ['思想道德', '学习态度', '实践能力', '综合评分'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '分数',
                type: 'bar',
                barWidth: '60%',
                data: [estimation.moral, estimation.attitude, estimation.practice, estimation.total]
            }
        ]
    }
    option && chart.setOption(option);
}
</script>